<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#myCan {
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="800px" height="800px"></canvas>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			ctx.translate(400, 400);
			var timer = null;
			// timer = setInterval(function() {
			// 	ctx.clearRect(0, 0, 800, 800)
			// 	bp();
			// 	zb();
			// }, 1000)
bp() 
			function bp() {
				for (var i = 1; i <= 60; i++) {
					if (i % 5 == 0) {
						ctx.rotate(6 * Math.PI / 180);
						ctx.fillRect(200, 0, -10, 8);
					} else {
						ctx.rotate(6 * Math.PI / 180);
						ctx.fillRect(200, 0, -3, 8);
					}
				}
			}

			function zb() {

				var tm = null;
				ctx.save();
				ctx.beginPath();
				ctx.fillStyle = '#00A902'
				ctx.arc(0, 0, 200, 0, 2 * Math.PI);
				ctx.fill();
				ctx.closePath();
				ctx.restore();

				ctx.beginPath()
				ctx.arc(0, 0, 5, 0, 2 * Math.PI);
				ctx.fill();
				ctx.closePath();

				ctx.save();
				ctx.fillRect(-5, -10, 10, 100);
				ctx.restore();

				ctx.save();
				ctx.fillStyle = 'red';
				ctx.fillRect(-2, -20, 4, 120);
				ctx.restore();

				// tm = setInterval(function() {
				// 	getTime();
				// }, 1000);

				// function getTime() {
				var time = new Date();
				console.log(time);
				var s, f, m;
				m = parseInt(time.getSeconds());
				f = parseInt(time.getMinutes() + m / 60);
				s = parseInt(time.getHours() + f / 60);
				console.log(m);
				ctx.save();
				ctx.beginPath();
				ctx.rotate(6 * Math.PI / 180);
				ctx.fillStyle = 'deepskyblue';
				ctx.fillRect(-1, -20, 2, 140);
				ctx.restore();
				// }
				// ctx.clearRect(0,0,800,800)
			}
			// ctx.clearRect(0,0,oC.width,oC.height);
		</script>
	</body>
</html>
